<template>
  <div class="findPd">
    <div class="nav">
      <Nav></Nav>
    </div>
    <div class="content">
      <div class="form_content">
        <div style="margin-left: 200px;margin-bottom: 20px;padding-top: 20px">
          <span style="font-size: 20px;font-weight: bold">重 置 密 码</span>
        </div>
        <div style="margin-left: 50px">
          <el-form ref="form"  label-width="120px" :rules="rules" :model="user">
            <el-form-item label="新 密 码：" prop="newPassword" :label-width="formLabelWidth">
              <el-input style="width: 250px" v-model="user.newPassword" placeholder="请输入新密码" type="password" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPassword" :label-width="formLabelWidth">
              <el-input style="width: 250px" v-model="user.confirmPassword"  placeholder="请确认密码" type="password" />
            </el-form-item>
            <div>
              <el-button style="width: 250px;margin-left: 80px" type="primary" @click="toSubmit()">重 置</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";
  export default {
    name: "FindPd",
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.user.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        formLabelWidth:'120px',
        User: {
          password:'',
          phone:this.$route.params.phone
        },
        user: {
          newPassword: undefined,
          confirmPassword: undefined
        },
        // 表单校验
        rules: {
          newPassword: [
            {required: true, message: "新密码不能为空", trigger: "blur"},
            {min: 8, max: 12, message: "长度在 8 到 12个字符", trigger: "blur"}
          ],
          confirmPassword: [
            {required: true, message: "确认密码不能为空", trigger: "blur"},
            {required: true, validator: equalToPassword, trigger: "blur"}
          ]
        },
      }
    },
    methods: {
      toSubmit: function () {
        let _this = this
        _this.User.password = _this.user.confirmPassword
        console.log(_this.User)
        this.$axios.post("http://localhost:8088/user/updatePassword", _this.User).then(function (res) {
          alert('重置成功！请重新登录！')
          _this.user={}
          _this.$router.push({name:'Index'})
        }).catch(function (err) {
          alert("重置失败！请重试！")
        })
      }
    },
    components: {
      Nav,
      Footer
    },
    mounted() {

    },
  }

</script>

<style scoped>
  .el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
  }

  .form_content {
    height: 250px;
    width: 500px;
    margin-left: 520px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 1px 10px gray;
  }

  .content {
    height: 460px;
    padding-top: 150px;
    background-color: rgba(228, 228, 228, 0.94);
  }
</style>
